<template>
	<view class="page-wrapper">
		<view class="portrait-wrapper">
      <view class="photo">
        <image class="img" src="/static/images/login/camera.png"></image>
      </view>
      <view class="title">添加头像</view>
    </view>
    
    <view class="form-wrapper">
      <view class="form-item u-border-bottom">
      	<view class="item-content u-flex u-col-center">
      		<view class="item-title">孩子姓名</view>
      		<u-input
      			class="u-m-r-10 u-flex-1"
      			placeholder="请输入孩子的真实姓名"
      			v-model="form.data.name"
      			type="text"
      		></u-input>
      	</view>
      	<view class="message-error">{{ form.error.name || '' }}</view>
      </view>
      
      <view class="form-item u-border-bottom">
      	<view class="item-content u-flex u-col-center">
      		<view class="item-title">孩子性别</view>
          <u-radio-group v-model="form.data.sex">
          	<u-radio shape="circle" name="1">男</u-radio>
            <u-radio shape="circle" name="2">女</u-radio>
          </u-radio-group>
      	</view>
      	<view class="message-error">{{ form.error.sex || '' }}</view>
      </view>
      
      <view class="form-item u-border-bottom">
      	<view class="item-content u-flex u-col-center">
      		<view class="item-title">孩子生日</view>
          <view class="message u-flex-1" @tap="handleOpenBirthday">{{form.data.birthday}}</view>
          <u-calendar v-model="displayBirthday" mode="date" @change="handleChangeBirthday"></u-calendar>
      	</view>
      	<view class="message-error">{{ form.error.birthday || '' }}</view>
      </view>
      
      <view class="form-item u-border-bottom">
      	<view class="item-content u-flex u-col-center">
      		<view class="item-title">我是孩子的</view>
          <view class="message u-flex-1" @tap="handleOpenRelationShip">{{form.data.relationShipData}}</view>
          <u-select
            v-model="displayRelationShip"
            :list="relationShipList"
            @confirm="handleConfirmRelationShip"
          />
      	</view>
      	<view class="message-error">{{ form.error.relationShip || '' }}</view>
      </view>
      
      <view class="btn-groups-wrapper">
      	<button class="u-reset-button btn-primary" @tap="handleSubmit">确定</button>
      </view>
    </view>
	</view>
</template>

<script>
  import { mapActions } from 'vuex';
  
export default {
	name: 'AddChild',
  data() {
    return {
      displayBirthday: false,
      displayRelationShip: false,
      form: {
        data: {
        	name: '',
        	sex: 1,
        	birthday: '',
        	relationShip: '',
          relationShipData: '',
        },
        rules: {
        },
        error: {
        	name: '',
        	birthday: '',
        	relationShip: '',
        }
      },
      relationShipList: [],
    }
  },
  mounted() {
    this.$http(
      'common.codeInfo',
      {
        keyCode: 'relationship'
      },
    )
    .then(res => {
      const { status, data } = res
      if (status === 200) {
        this.relationShipList = data.map(d => ({
          label: d.val,
          value: d.code,
        }))
      }
    });
  },
	methods: {
    ...mapActions(['showAuthModal']),
    handleOpenBirthday() {
      this.displayBirthday = true
    },
    handleChangeBirthday(e){
      this.form.data.birthday = e.result
    },
    handleOpenRelationShip() {
      this.displayRelationShip = true
    },
    handleConfirmRelationShip(ret) {
      if (ret && ret.length > 0) {
        this.form.data.relationShip = ret[0].value
        this.form.data.relationShipData = ret[0].label
      }
    },
    handleSubmit() {
      const self = this
      const { name, sex, relationShip, birthday } = self.form.data
      this.$http(
        'info.addChild',
        {
          name,
          sex,
          relationShip,
          birthday,
        },
        '操作中...'
      )
      .then(res => {
        const { status, data, msg } = res
        if (status === 200) {
          self.$u.toast(msg);
          
          this.showAuthModal('bindChildren')
        }
      });
    },
	}
};
</script>

<style lang="scss" scoped>
  @import './style.scss';
  
.page-wrapper {
  background: #F8F8F8;
  
  .portrait-wrapper {
    background: #fff;
    padding: 48rpx;
    margin-bottom: 32rpx;
    
    .photo {
      margin: 0 auto;
      padding: 80rpx;
      width: 280rpx;
      height: 280rpx;
      background: #F8F8F8;
      border-radius: 50%;
      border: 1px solid #E0E2E9;
      
      .img {
        width: 120rpx;
        height: 120rpx;
      }
    }
    
    .title{
      margin-top: 32rpx;
      font-size: 34rpx;
      font-weight: 500;
      color: #999999;
    }
  }

  .form-wrapper {
    background: #fff;
    margin-top: 0;
    
    .message {
      height: 68rpx;
      text-align: left;
      font-size: 34rpx;
      font-weight: 500;
      color: #999999;
    }
  }
}
</style>
